import { GetUserInfo } from '@/api/user'
import Logo from '@/assets/logo.png'
import Title from '@/assets/thsnk-1.png'

import Title1 from '@/assets/thsnk-2.png'
import Title2 from '@/assets/thsnk-2-1.png'
import Kang from '@/assets/thsnk-3.png'
import Button2 from '@/assets/thsnk-5.png'
import MallLinkButton from '@/components/MallLinkButton'

import PageBack from '@/components/PageBack'

import usePoster from '@/components/usePoster'
import { XyzTransitionGroup } from '@animxyz/react'
import classNames from 'classnames'
import { useQuery } from 'umi'
import styles from './thanks.module.less'
import '@animxyz/core'

export default function Page() {
  const { open: openPoster, renderNode: renderPosterNode } = usePoster()

  // 获取用户信息
  const { data: user } = useQuery(['get/user/info'], GetUserInfo, {
    refetchOnWindowFocus: false,
  })

  return (
    <>
      <PageBack />

      <XyzTransitionGroup
        duration="auto"
        appear
        appearVisible
        xyz="fade up-2 stagger-2"
        className={classNames(
          styles.pageContainer,
          ' min-h-screen bg-cover bg-bottom flex flex-col pt-[50px] items-center pb-6 overflow-hidden relative',
        )}
      >
        <img src={Logo} className="block h-8" alt="" />
        <img src={Title} className=" block w-[300px] mt-[78px] mb-[80px]" alt="" />

        {(!user?.today_share && (
          <img src={Title1} alt="" className=" block w-[300px]" />
        )) || <img src={Title2} alt="" className=" block w-[300px]" />}

        <div className="flex relative justify-center w-full">
          <img
            src={Kang}
            className=" block relative -left-3 w-[280px]"
            alt=""
          />
        </div>

        <div className="relative">
          {!user?.today_share && (
            <i
              onClick={() => {
                openPoster()
              }}
              className={classNames(
                styles.new,
                ' absolute -right-12 -top-4 z-10 w-[411px] h-[140px] bg-cover with-ani-scales',
              )}
            >
            </i>
          )}

          <button
            type="button"
            style={{
              backgroundImage: `url(${Button2})`,
            }}
            onClick={() => {
              openPoster()
            }}
            className="w-[623px] h-[120px] bg-cover bg-center with-ani-scales mt-3"
          />
        </div>
      </XyzTransitionGroup>

      <div className="absolute right-0 bottom-0">
        <MallLinkButton />
      </div>

      {renderPosterNode()}
    </>
  )
}
